<template>
    <div>
        <!-- <h1>土地信息查询</h1> -->
        <!-- 面包屑导航 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/management' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>土地</el-breadcrumb-item>
            <el-breadcrumb-item>信息查询</el-breadcrumb-item>
        </el-breadcrumb>
        
        <!-- 查询-->
        <el-card>
            <el-form ref="landInquiryRefs" :inline="true" :model="land" >
                <el-form-item label="坐落位置" prop="landLocation">
                    <el-input v-model="land.landLocation" placeholder="请输入位置"></el-input>
                </el-form-item>
                
                <el-form-item label="性质" prop="landType">
                    <el-input v-model="land.landType" placeholder="请输入土地性质"></el-input>
                </el-form-item>
                
                <el-form-item label="获得方式" prop="landGet">
                    <el-select v-model="land.landGet" placeholder="请选择获得方式">
                            <el-option value="购买" label="购买获得"></el-option>
                            <el-option value="11" label="11获得"></el-option>
                    </el-select>
                    
                </el-form-item>
                
                <!-- <el-form-item label="获得时间" prop="land_get_time">
                    <el-date-picker type="date" placeholder="选择日期"  v-model="land.land_get_time"></el-date-picker>
                </el-form-item> -->
                
                <el-form-item label="面积" prop="landArea">
                    <el-input v-model="land.landArea" placeholder="请输入面积"></el-input>
                </el-form-item>
                
                <el-form-item label="价值" prop="landVal">
                    <el-input v-model="land.landVal" placeholder="请输入土地价值"></el-input>
                </el-form-item>
                
                <el-form-item label="录入状态" prop="landEntry">
                    <el-select v-model="land.landEntry" placeholder="请选择录入状态">
                            <el-option value="0" label="未录入"></el-option>
                            <el-option value="1" label="已录入"></el-option>
                    </el-select>
                </el-form-item>
                
                <el-form-item prop="landId">
                    <el-input v-model="land.landId" placeholder="请输入土地证号"></el-input>
                </el-form-item>
                
                <!-- 按钮 -->
                <el-form-item>
                    <el-button type="primary" @click="onSearch">查询</el-button>
                    <el-button type="info" @click="resetForm">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        
        <!-- 功能区域 -->
        <div class="features">
            <div class="btn">
                <el-button @click="landsExport" icon="el-icon-upload2" size="medium" plain>导出</el-button>
                <el-button @click="landsDelete" icon="el-icon-delete" size="medium" plain>删除</el-button>
                <el-tag type="info">总数: {{this.queryInfo.total}} 条</el-tag>
            </div>
        </div>
        
        <!-- 信息展示卡片 -->
        <el-card>  
            <!-- table表格区域 -->
            <el-table :data="landslist" stripe :header-cell-style="{backgroundColor:'#f3f3f5'}">
                <el-table-column type="index"></el-table-column>
                <el-table-column prop="landName" label="土地名称" width="100px"></el-table-column>
                <el-table-column prop="landId" label="土地证号" width="100px"></el-table-column>
                <el-table-column prop="landLocation" label="位置" width="100px"></el-table-column>
                <el-table-column prop="landArea" label="土地面积(㎡)" width="100px"></el-table-column>
                <el-table-column prop="landVal" label="价值(元)" width="100px"></el-table-column>
                <el-table-column prop="landType" label="性质" width="100px"></el-table-column>
                <el-table-column prop="landGet" label="获得方式" width="100px"></el-table-column>
                <el-table-column prop="land_get_time" label="获得日期" width="100px"></el-table-column>
                <el-table-column prop="landEntry" label="录入" width="100px">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.landEntry === 1 ">是</el-tag>
                        <el-tag type="warning" v-else>否</el-tag>
                    </template>
                </el-table-column>
                
                <el-table-column label="操作" width="250px">
                    <template slot-scope="scope">
                        <!-- 录入按钮 -->
                        <el-tooltip effect="dark" content="录入" placement="top" :enterable="false">
                            <el-button size="mini" type="success" icon="el-icon-download"></el-button>
                        </el-tooltip>
                        
                        <!-- 详情按钮 -->
                        <el-tooltip effect="dark" content="详情" placement="top" :enterable="false">
                            <el-button size="mini" type="info" icon="el-icon-search" @click="showDetails(scope.row)"></el-button>
                        </el-tooltip>
                        
                        <!-- 编辑按钮 -->
                        <el-button type="primary" icon="el-icon-edit" size="mini" @click="edit(scope.row)"></el-button>
                        <!-- 删除按钮 -->
                        <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteLand(scope.row.landId)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            
            <!-- 分页功能 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryInfo.page"
                :page-sizes="[10,15]"
                :page-size="queryInfo.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="queryInfo.total" background>
            </el-pagination>
            
            
            
        </el-card>
    </div>
</template>
<script>
export default {
    data() {
        return {
            queryInfo:{
            query: "",
            // 当前页数
            page: 1,
            // 当前每页显示多少数据
            size: 10,
            total: 0,  
            },
            
            land:{
                landArea: '',
                landEntry: '',
                landGet: '',
                landLocation: '',
                landId: '',
                landType: '',
                landVal: '',
                land_get_time: '',
            },
            landslist:[],
        }
    },
    created(){
        this.getLandsList();
        this.landTotal();
    },
    methods: {
    
    
        // 重置表单
        resetForm(){
            this.$refs.landInquiryRefs.resetFields()
        },
        
        // 获取表单数据
        async getLandsList(){
            await this.$http.get(`land/p/${this.queryInfo.page}/${this.queryInfo.size}`).then(res=>{
                if(res.data.code !==1){
                    return this.$message.error("土地信息获取失败！");
                }
                let list = Array.prototype.slice.call(res.data.data.list);
                this.landslist = list;
            }).catch((err)=>{
                // console.log(err);
            }); 
          
        },
        
        // 获取土地总条数
        async landTotal(){
            await this.$http.get('/land/findSums').then(res=>{
                this.queryInfo.total = res.data.data;
          });
        },
        
        // 模糊查询
        async onSearch(){
            await this.$http.post('land/listFunc',this.land).then(res=>{
                if(res.data.code !==1){
                    return this.$message.error('查询失败！');
                }
                this.queryInfo.total = res.data.data.length
                this.landslist = res.data.data;
            }).catch((err)=>{
                console.log(err);
            })
        },

        // 删除表单信息 
        async deleteLand(landId){
            // 弹窗询问
            const conFirmResult = await this.$confirm(
                "此操作将永久删除该条土地信息, 是否继续?",
                "提示",
                {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
                }
                // 用catch捕获错误消息
            ).catch((err) => err);
            // 确认删除:confirm  取消删除:cancel
            if (conFirmResult !== "confirm") {
                return this.$message.info("已取消删除！");
            }
            
            await this.$http.delete(`land/${landId}`).then(res=>{
                if (res.data.code !==1) {
                    return this.$message.error("删除土地信息失败！");
                }
                this.landTotal();
                this.getLandsList();
                return this.$message.success("删除土地信息成功");
            })
        }, 
        
         // 详情页面
        async showDetails(row){
            await this.$router.push(`landsDetails/${row.landId}`);
        },
        
        //进入编辑页面
        edit(row){
            console.log(row.landId);
        },
        
        
        // 分页功能方法
        handleSizeChange(newSize){
            this.queryInfo.size = newSize;
            this.getLandsList();
        },
        // 监听页码的变化
        handleCurrentChange(newPage){
            this.queryInfo.page = newPage;
            this.getLandsList();
        },
        
        
        
        //  按钮操作  导入 导出 删除 筛查
        
        // 导出土地数据
        async landsExport(){
             await this.$http.get('/land/loadOut',{
                responseType:'blob'}).then(res=>{
                        if(res.data.code !==1){
                            let blob = res.data;
                            // FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件的内容
                            const fileReader = new FileReader(); 
                            // 开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容
                            fileReader.readAsDataURL(blob); 
                            fileReader.onload = (event) => { 
                                // 处理load事件。该事件在读取操作完成时触发
                                // 新建个下载的a标签，完成后移除。
                                let a = document.createElement('a');
                                let _fileName = '土地信息.xlsx';
                                a.download = _fileName;
                                a.href = event.target.result; 
                                document.body.appendChild(a);
                                a.click();
                                document.body.removeChild(a);
                            }
                        return this.$message.success('导出成功！')
                    }
                return this.$message.error('导出失败！');
                });
        },
        
        landsDelete(){},
        
       
    },
}
</script>
<style scoped>
   
</style>
